<template>
  <div id="fill-insurance-car">
    <header><h4></h4></header>
    <ul>
      <li v-if="loading.ha" class="spinner">
        <spinner
          type="triple-bounce"
          color="#0196ff"
          :size="36"></spinner>
      </li>
      <li
        v-else-if="items.ha.info.length"
        v-for="(item, index) in items.ha.info"
        :class="{active: checkbox.indexOf(Number(item.new_money)) !== -1}"
        :key="index">
        <section>
          <p>{{ item.name }}</p>
          <p>{{ item.car }}</p>
        </section>
        <h6><span>&yen;&nbsp;&nbsp;</span>{{ item.new_money | deleteDot }}</h6>
        <input
          type="checkbox"
          :value="Number(item.new_money)"
          v-model="checkbox"
          @change="getParams([items.ha.id, items.ha.in_id, items.ha.user_id, item.model_code, item.new_money], 0)">
      </li>
      <li class="message" v-else-if="items.ha.error_message">提交信息有误：{{ items.ha.error_message }}</li>
      <li class="message" v-else-if="!items.ha.info.length">此车型暂不支持投保</li>
    </ul>
    <header><h4></h4></header>
    <ul>
      <li v-if="loading.astp" class="spinner">
        <spinner
          type="triple-bounce"
          color="#0196ff"
          :size="36"></spinner>
      </li>
      <li
        v-else-if="items.astp.info.length"
        v-for="(item, index) in items.astp.info"
        :class="{active: checkbox.indexOf(Number(item.new_money)) !== -1}"
        :key="index">
        <section>
          <p>{{ item.name }}</p>
          <p>{{ item.car }}</p>
        </section>
        <h6><span>&yen;&nbsp;&nbsp;</span>{{ item.new_money | deleteDot }}</h6>
        <input
          type="checkbox"
          :value="Number(item.new_money)"
          v-model="checkbox"
          @change="getParams([items.astp.id, items.astp.in_id, items.astp.user_id, item.model_code, item.new_money], 1)">
      </li>
      <li class="message" v-else-if="items.astp.error_message">提交信息有误：{{ items.astp.error_message }}</li>
      <li class="message" v-else-if="!items.astp.info.length">此车型暂不支持投保</li>
    </ul>
    <header><h4></h4></header>
    <ul>
      <li v-if="loading.dh" class="spinner">
        <spinner
          type="triple-bounce"
          color="#0196ff"
          :size="36"></spinner>
      </li>
      <li
        v-else-if="items.dh.info.length"
        v-for="(item, index) in items.dh.info"
        :class="{active: checkbox.indexOf(Number(item.new_money)) !== -1}"
        :key="index">
        <section>
          <p>{{ item.name }}</p>
          <p>{{ item.car }}</p>
        </section>
        <h6><span>&yen;&nbsp;&nbsp;</span>{{ item.new_money | deleteDot }}</h6>
        <input
          type="checkbox"
          :value="Number(item.new_money)"
          v-model="checkbox"
          @change="getParams([items.dh.id, items.dh.in_id, items.dh.user_id, item.model_code, item.new_money], 2)">
      </li>
      <li class="message" v-else-if="items.dh.error_message">提交信息有误：{{ items.dh.error_message }}</li>
      <li class="message" v-else-if="!items.dh.info.length">此车型暂不支持投保</li>
    </ul>
    <header><h4></h4></header>
    <ul>
      <li v-if="loading.rb" class="spinner">
        <spinner
          type="triple-bounce"
          color="#0196ff"
          :size="36"></spinner>
      </li>
      <li
        v-else-if="items.rb.info.length"
        v-for="(item, index) in items.rb.info"
        :class="{active: checkbox.indexOf(Number(item.new_money)) !== -1}"
        :key="index">
        <section>
          <p>{{ item.name }}</p>
          <p>{{ item.car }}</p>
        </section>
        <h6><span>&yen;&nbsp;&nbsp;</span>{{ item.new_money | deleteDot }}</h6>
        <input
          type="checkbox"
          :value="Number(item.new_money)"
          v-model="checkbox"
          @change="getParams([items.rb.id, items.rb.in_id, items.rb.user_id, item.model_code, item.new_money], 3)">
      </li>
      <li class="message" v-else-if="items.rb.error_message">提交信息有误：{{ items.rb.error_message }}</li>
      <li class="message" v-else-if="!items.rb.info.length">此车型暂不支持投保</li>
    </ul>
    <header><h4></h4></header>
    <ul>
      <li v-if="loading.bbw" class="spinner">
        <spinner
          type="triple-bounce"
          color="#0196ff"
          :size="36"></spinner>
      </li>
      <li
        v-else-if="items.bbw.info.length"
        v-for="(item, index) in items.bbw.info"
        :class="{active: checkbox.indexOf(Number(item.new_money)) !== -1}"
        :key="index">
        <section>
          <p>{{ item.name }}</p>
          <p>{{ item.car }}</p>
        </section>
        <h6><span>&yen;&nbsp;&nbsp;</span>{{ item.new_money | deleteDot }}</h6>
        <input
          type="checkbox"
          :value="Number(item.new_money)"
          v-model="checkbox"
          @change="getParams([items.bbw.id, items.bbw.in_id, items.bbw.user_id, item.model_code, item.new_money], 4)">
      </li>
      <li class="message" v-else-if="items.bbw.error_message">提交信息有误：{{ items.bbw.error_message }}</li>
      <li class="message" v-else-if="!items.bbw.info.length">此车型暂不支持投保</li>
    </ul>
    <p v-if="!items.ha.info.length || !items.astp.info.length || !items.dh.info.length || !items.rb.info.length || !items.bbw.info.length">
      <span v-if="items.ha.info.length || items.astp.info.length || items.dh.info.length || items.rb.info.length || items.bbw.info.length">此车型只能投保</span>
      <span v-if="items.ha.info.length" class="yes">&nbsp;华安保险&nbsp;</span>
      <span v-if="items.astp.info.length" class="yes">&nbsp;安盛天平保险&nbsp;</span>
      <span v-if="items.dh.info.length" class="yes">&nbsp;鼎和保险&nbsp;</span>
      <span v-if="items.rb.info.length" class="yes">&nbsp;中国人民保险&nbsp;</span>
      <span v-if="items.bbw.info.length" class="yes">&nbsp;北部湾保险&nbsp;</span>

      <span v-if="!items.ha.info.length" class="no">&nbsp;华安保险&nbsp;</span>
      <span v-if="!items.astp.info.length" class="no">&nbsp;安盛天平保险&nbsp;</span>
      <span v-if="!items.dh.info.length" class="no">&nbsp;鼎和保险&nbsp;</span>
      <span v-if="!items.rb.info.length" class="no">&nbsp;中国人民保险&nbsp;</span>
      <span v-if="!items.bbw.info.length" class="no">&nbsp;北部湾保险&nbsp;</span>
      暂不支持投保
    </p>
    <footer class="public-footer-btn-box">
      <button
        class="single-button"
        :disabled="checkbox.length === 0 || submitDisabled"
        @click="then">下一步</button>
    </footer>
  </div>
</template>

<script>
  import { Indicator, Spinner } from 'mint-ui';
  export default {
    name: "fill-insurance-car",
    components: {
      Spinner
    },
    data() {
      return {
        loading: {
          ha: true,
          astp: true,
          dh: true,
          rb: true,
          bbw: true
        },
        items: {
          ha: {
            info: ['kn'] // cloak
          },
          astp: {
            info: ['kn'] // cloak
          },
          dh: {
            info: ['kn'] // cloak
          },
          rb: {
            info: ['kn'] // cloak
          },
          bbw: {
            info: ['kn'] // cloak
          }
        },
        params: {
          ha: [],
          astp: [],
          dh: [],
          rb: [],
          bbw: []
        },
        checkbox: [],
        submitDisabled: false
      }
    },
    methods: {

      // 同步请求四家公司的车型 （1 2 3 4 5）

      typeTrigger(company) {
        this.$http.post({
          api: this.$api.INSURANCE_CAR_BY_COMPANY,
          params: {
            in_id: this.$route.params.in_id,
            company: company
          },
          success: (res) => {
            this.getType(company);
          }
        })
      },

      // 获得四家公司的车型

      getType(company) {
        this.$http.post({
          api: this.$api.INSURANCE_CAR_LEVEL,
          params: {
            in_id: this.$route.params.in_id
          },
          success: (res) => {
            switch (company) {
              case 1:
                // 华安
                this.loading.ha = false;
                this.items.ha = res.data.data.ha;
                break;
              case 2:
                // 安盛天下
                this.loading.astp = false;
                this.items.astp = res.data.data.astp;
                break;
              case 3:
                // 鼎和
                this.loading.dh = false;
                this.items.dh = res.data.data.dh;
                break;
              case 4:
                // 人保
                this.loading.rb = false;
                this.items.rb = res.data.data.rb;
                break;
              case 5:
                // 北部湾
                this.loading.bbw = false;
                this.items.bbw = res.data.data.bbw;
                break;
              default:
                throw 'new company!';
            }
          }
        });
      },

      // data 变化无法触发 checkbox 的 change 事件

      getParams(param, index) {

        // 初始化 - 删除之前的选择（既单选也多选...）

        if (this.checkbox.length === 2) {
          this.checkbox.shift();
        }

        let ha = this.items.ha;
        let astp = this.items.astp;
        let dh = this.items.dh;
        let rb = this.items.rb;
        let bbw = this.items.bbw;

        let price = this.checkbox[0];

        switch (index) {
          case 0:
            this.params.ha = param;
            this.params.astp = this.getSame(astp, price);
            this.params.dh = this.getSame(dh, price);
            this.params.rb = this.getSame(rb, price);
            this.params.bbw = this.getSame(bbw, price);
            break;
          case 1:
            this.params.astp = param;
            this.params.ha = this.getSame(ha, price);
            this.params.dh = this.getSame(dh, price);
            this.params.rb = this.getSame(rb, price);
            this.params.bbw = this.getSame(bbw, price);
            break;
          case 2:
            this.params.dh = param;
            this.params.ha = this.getSame(ha, price);
            this.params.astp = this.getSame(astp, price);
            this.params.rb = this.getSame(rb, price);
            this.params.bbw = this.getSame(bbw, price);
            break;
          case 3:
            this.params.rb = param;
            this.params.ha = this.getSame(ha, price);
            this.params.astp = this.getSame(astp, price);
            this.params.dh = this.getSame(dh, price);
            this.params.bbw = this.getSame(bbw, price);
            break;
          case 4:
            this.params.bbw = param;
            this.params.ha = this.getSame(ha, price);
            this.params.astp = this.getSame(astp, price);
            this.params.dh = this.getSame(dh, price);
            this.params.rb = this.getSame(rb, price);
            break;
          default:
            throw 'new company!'
        }
      },

      getSame(company, price) {
        for (let i = 0; i < company.info.length; i ++) {
          // 只判断值
          if (company.info[i].new_money == price) {
            return [company.id, company.in_id, company.user_id, company.info[i].model_code, company.info[i].new_money]
          }
        }
      },

      then() {

        // 提示

        Indicator.open({
          text: '请耐心等候',
          spinnerType: 'snake'
        });

        let params = {
          ha: this.params.ha || ['0', '0', localStorage.getItem('id'), '0', '0'],
          astp: this.params.astp || ['0', '0', localStorage.getItem('id'), '0', '0'],
          dh: this.params.dh || ['0', '0', localStorage.getItem('id'), '0', '0'],
          rb: this.params.rb || ['0', '0', localStorage.getItem('id'), '0', '0'],
          bbw: this.params.bbw || ['0', '0', localStorage.getItem('id'), '0', '0']
        };

        sessionStorage.setItem('INSURANCE_PRICE_BY_CAR', this.$tool.qs.stringify(params));

        this.$http.post({
          api: this.$api.INSURANCE_PRICE_BY_CAR,
          params: params,
          success: (res) => {
            this.$tool.whenToast(
              () => {
                Indicator.close();

                // 禁止重复点击（不再恢复，组件即将销毁）

                this.submitDisabled = true;
              },
              {
                message: '提交成功，请继续查看报价',
                duration: -1,
                className: 'public-long-toast'
              },
              () => {
                sessionStorage.setItem('offer', this.$tool.qs.stringify(res.data));
                this.$router.push({
                  name: 'PayInsuranceOffer',
                  params: {
                    type: this.$route.params.type,
                    car_owner_id: this.$route.params.car_owner_id,
                    car_id: this.$route.params.car_id,
                    policy_id: this.$route.params.policy_id,
                    in_id: this.$route.params.in_id
                  },
                  query: {
                    insurance_package: this.$route.query.insurance_package
                  }
                });
              },1200
            )
          }
        })
      }
    },
    created() {
      sessionStorage.removeItem('offer');

      for (let i = 1; i < 6; i++) {
        this.typeTrigger(i);
      }
    }
  }
</script>

<style lang="scss">

  #fill-insurance-car {

    padding-bottom: $public-footer-btn-box-height;

    $this-public-border: 1px solid #eee;

    >header {
      display: flex;
      align-items: center;
      height: 3rem;
      padding-left: 1rem;
      margin-top: 1rem;
      background: $white;
      border-bottom: $this-public-border;

      >h4 {
        width: 70px;
        height: 18px;
        background: url("../../assets/images/public/companies.png") no-repeat center / $size-as-parent auto;
      }

      &:first-of-type > h4 {
        background-position-y: top;
      }

      &:nth-of-type(2) > h4 {
        background-position-y: -39px;
      }

      &:nth-of-type(3) > h4 {
        background-position-y: -79px;
      }

      &:nth-of-type(4) > h4 {
        background-position-y: -119px;
      }

      &:nth-of-type(5) > h4 {
        background-position-y: -166px;
      }
    }

    >ul {
      background: $white;

      >li {

        $li-height: 5rem;

        position: relative;
        display: flex;
        justify-content: space-between;
        min-height: $li-height;
        padding: 0 1rem 0 3rem;
        border-bottom: $this-public-border;

        &.active {
          background: #d3edfe;
        }

        &:last-of-type {
          border: none;
        }

        &.spinner {
          align-items: center;
          justify-content: space-around;
        }

        &.message {
          align-items: center;
          padding-top: .8rem;
          padding-bottom: .8rem;
          word-break: break-all;
          line-height: 1.8rem;
          font-size: 1.2rem;
          color: #333;
        }

        >section {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          width: 68%;
          padding: .9rem 0;

          >p {
            width: 100%;
            font-size: 1.2rem;
            color: #333;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;

            &:nth-of-type(2) {
              color: #0196ff;
            }
          }
        }

        >h6 {
          font-size: 1.5rem;
          color: #f00;
          line-height: $li-height;

          >span {
            font-size: 1.2rem;
          }
        }

        >input {
          position: absolute;
          left: 0;
          top: 0;
          width: $size-as-parent;
          height: $size-as-parent;
          background: transparent;
        }
      }
    }

    >p {
      padding: 1.6rem 1rem;
      font-size: 1.2rem;
      color: #999;

      >.yes {
        color: #0196ff;
      }

      >.no {
        color: #f00;
      }
    }
  }
</style>
